<template>
  <div class="s-input-list-wrapper" v-bind:style="{width:width}">
    <ul class="s-input-lists">
      <li v-for="(item,index) in lists" :key="index"
        v-bind:class="{lf:horizontal,'full-width': item.type == 'fulltext' || item.type == 'bigtextarea' || item.type == 'verticaltext' }">
        <div class="item-list">
          <label class="item-label" :style="{width:!noLabelWidth && labelWidth}" v-if="!item.hidden && !noLabel">
            <span class="require-style" v-if="item.required">*</span>
            {{item.label}}
            <span v-if="showColon">：</span>
          </label>
          <div class="item-value"
            v-if="!item.hidden && item.type == 'text' || item.type == 'email' || item.type == 'textarea'">
            <el-input :type="item.type" :placeholder="item.placeholder" size="small" :disabled="item.disabled"
              v-model="item.value" clearable v-bind:style="{width:valueWidth}"></el-input>
          </div>
          <div class="item-value"
            v-if="!item.hidden && item.type == 'password'">
            <el-input :type="item.type" :placeholder="item.placeholder" size="small" :disabled="item.disabled"
              v-model="item.value" clearable v-bind:style="{width:valueWidth}"></el-input>
          </div>
          <div class="item-value" v-if="!item.hidden && item.type == 'number'">
            <el-input-number v-model="item.value" controls-position="right" @change="changeNumber"
              :disabled="item.disabled" clearable size="small" :min="item.min" :max="item.max"
              v-bind:style="{width:valueWidth}"></el-input-number>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'date'">
            <el-date-picker type="date" v-model="item.value" align="left" clearable size="small" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" placeholder="请选择日期" v-bind:style="{width:valueWidth}" :disabled="item.disabled"
              @change="changeDate"></el-date-picker>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'datetime'">
            <el-date-picker type="datetime" v-model="item.value" align="left" clearable size="small"
              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间"
              v-bind:style="{width:valueWidth}" :disabled="item.disabled" @change="changeDate"></el-date-picker>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'year'">
            <el-date-picker type="year" v-model="item.value" align="left" clearable size="small" format="yyyy 年"
              value-format="yyyy" placeholder="请选择年份" v-bind:style="{width:valueWidth}" :disabled="item.disabled"
              @change="changeYear"></el-date-picker>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'month'">
            <el-date-picker type="month" v-model="item.value" align="left" clearable size="small" format="MM 月"
              value-format="MM" placeholder="请选择月份" v-bind:style="{width:valueWidth}" :disabled="item.disabled"
              @change="changeMonth"></el-date-picker>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'datetimerange'">
            <el-date-picker type="datetimerange" v-model="item.value" align="left" clearable size="small"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-bind:style="{width:item.width}"
              :disabled="item.disabled" @change="changeDateTimeRange"></el-date-picker>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'daterange'">
            <el-date-picker type="daterange" v-model="item.value" align="left" clearable size="small"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-bind:style="{width:item.width}"
              :disabled="item.disabled" @change="changeDateRange"></el-date-picker>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'select'">
            <!--{width:item.width}-->
            <el-select v-model="item.value" size="small" :filterable="filterable" clearable placeholder="请选择"
              v-bind:style="{width:valueWidth}" :disabled="item.disabled" @change="changeOption($event,item)"
              value-key="id">
              <el-option v-for="op in item.option" :key="op.value" :label="op.label" :value="op.value"
                :disabled="op.disabled"></el-option>
            </el-select>
          </div>
          <div class="item-value" v-if="!item.hidden && item.type == 'selectCanedit'">
            <el-select v-model="item.value" :filterable="filterable" allow-create placeholder="请选择" clearable size="small"
              v-bind:style="{width:valueWidth}" @change="editSelectChange">
              <el-option v-for="op in item.option" :key="op.value" :label="op.label" :value="op.value"></el-option>
            </el-select>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'multiSelect'">
            <el-select v-model="item.value" size="small" multiple clearable :filterable="filterable" :collapse-tags="collapseTags" placeholder="请选择"
              v-bind:style="{width:valueWidth}" :disabled="item.disabled" @change="changeMultOption($event,item)">
              <el-option v-for="op in item.option" :key="op.value" :label="op.label" :value="op.value"
                :disabled="op.disabled"></el-option>
            </el-select>
          </div>
          <div class="item-value" v-if="!item.hidden && item.type == 'selectCascader'">
            <el-cascader v-model="item.value" :options="item.option" :props="item.props" placeholder="请选择" size="small"
              v-bind:style="{width:valueWidth}" :show-all-levels="isCascaderShowAll" @change="cascaderSelectChange" @active-item-change="cascaderItemChange">
            </el-cascader>
          </div>
          <div class="item-value" v-if="!item.hidden && item.type == 'verticaltext'"
            v-bind:style="{width:'calc(100% - 360px)'}">
            <ul class="vertical-lists">
              <li v-for="(op,index) in item.option" :key="index">
                <div class="vertical-text-label">{{op.label}}</div>
                <div class="vertical-text-value">
                  <el-input type="text" :placeholder="op.placeholder" size="small" :disabled="op.disabled"
                    v-model="op.value" clearable></el-input>
                </div>
              </li>
            </ul>
          </div>
          <div class="item-value" v-if="!item.hidden && item.type == 'fulltext'"
            v-bind:style="{width:'calc(100% - 400px)'}">
            <el-input type="text" :placeholder="item.placeholder" size="small" :disabled="item.disabled"
              v-model="item.value" clearable v-bind:style="{width:'100%'}"></el-input>
          </div>
          <div class="item-value" v-else-if="!item.hidden && item.type == 'bigtextarea'"
            v-bind:style="{width:'calc(100% - 400px)'}">
            <el-input type="textarea" :placeholder="item.placeholder" size="small" :disabled="item.disabled"
              v-model="item.value" clearable v-bind:style="{width:'100%'}"></el-input>
          </div>
        </div>
      </li>
      <li class="s-input-search" v-bind:class="{lf:horizontal}" v-if="showSearch">
        <div class="search-condition-button">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "InputListView",
    props: {
      //表单控件数据
      items: {
        type: Array,
        default: function () {
          return [];
        }
      },
      width: {
        type: String,
        default: ""
      },
      horizontal: {
        type: Boolean,
        default: false
      },
      labelWidth: {
        type: String,
        default: "auto"
      },
      noLabelWidth: {
        type: Boolean,
        default: false
      },
      showColon: {
        type: Boolean,
        default: true
      },
      showSearch: {
        type: Boolean,
        default: false
      },
      noLabel: {
        type: Boolean,
        default: false
      },
      collapseTags: {
        type: Boolean,
        default: false
      }, // 多选时是否将选中值按文字的形式展示
      filterable: {
        type: Boolean,
        default: false
      }, // 下拉框、多选下拉框、级联框可搜索,
      isCascaderShowAll: {
        type: Boolean,
        default: true
      }, // 级联选择框是否只展示最后一项,默认展示全部
    },
    data: function () {
      return {
        lists: this.items,
        valueWidth: "auto"
      };
    },
    watch: {
      items(val) {
        this.lists = val;
      }
    },
    mounted: function () {
      if (this.width) {
        if (this.width == "auto") {
          this.valueWidth = "200px";
        } else if (this.width == "100%") {
          if (this.noLabel) {
            this.valueWidth = "100%";
          } else {
            this.valueWidth = "200px";
          }
        } else {
          if (!this.noLabelWidth) {
            this.valueWidth =
              parseFloat(this.width) - parseFloat(this.labelWidth) - 30 + "px";
          } else {
            this.valueWidth = "200px";
          }
        }
      } else {
        this.valueWidth = "200px";
      }
    },
    methods: {
      changeDate(date) {
        this.$emit("on-change-date", date);
      },
      changeYear(year) {
        this.$emit("on-change-year", year);
      },
      changeMonth(month) {
        this.$emit("on-change-month", month);
      },
      changeDateTimeRange(dataTimeRange) {
        this.$emit("on-change-date-time-range", dataTimeRange);
      },
      changeDateRange(dataRange) {
        this.$emit("on-change-date-range", dataRange);
      },
      changeOption(value, item) {
        let me = this;
        let label = "";
        item.option.forEach(d => {
          d.value == value && (label = d.label);
        });
        this.lists.forEach(d => {
          if (d.label == item.label) {
            me.$set(d, "value", value);
          }
        });
        this.$emit("on-change-option", {
          item: item,
          label: label,
          value: value
        });
      },
      changeMultOption(value, item) {
        this.$emit("on-change-multi-option", value);
      },
      search() {
        this.$emit("on-search", this.lists);
      },
      editSelectChange(item) {
        this.$emit("on-edit-select-change", item);
      },
      cascaderSelectChange(item) {
        this.$emit("on-cascader-select-change", item);
      },
      cascaderItemChange(label, item) {
        /*this.$emit("on-cascader-item-change", {
          label: label,
          nodes: item.option
        });*/
      },
      changeNumber(number) {
        this.$emit("change-number", number);
      }
    }
  };

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../assets/styles/base_style";

  .s-input-list-wrapper {
    margin: 0 auto;

    ul {
      @include ulStyleFormat;
    }

    ul:after {
      @include clearFloat();
    }

    ul.s-input-lists {
      >li.full-width {
        width: 100%;
      }

      >li {
        margin: 5px;

        .require-style {
          color: red;
          padding: 0 2px;
        }

        .item-list:after {
          @include clearFloat();
        }

        .item-list {
          .item-label {
            float: left;
            margin-right: 5px;
            /*font-size: 1rem;*/
            font-size: 16px;
            text-align: right;
            height: 32px;
            line-height: 32px;
            @include font_color('color-text-primary');
          }

          .item-value {
            float: left;

            ul.vertical-lists {
              li {
                float: left;
                margin: 0 10px;

                .vertical-text-label {
                  margin: 5px 0;
                }

                .vertical-text-value {}
              }
            }
          }
        }
      }

      .s-input-search {
        .search-condition-button {}
      }

      .lf {
        float: left;
      }
    }
  }

</style>
<style rel="stylesheet/scss" lang="scss">
  .s-input-search .search-condition-button {
    .el-button {
      padding: 0px 15px;
      height: 32px;
      line-height: 32px;
    }
  }

</style>
